<template>
    <div :id="id" class="rtsp-video-modle">
        <video :id="id + 'video-webrtc'" :class="element.data.url === '' ? 'back' : 'noback'" controls v-show="element.data.type === 'webrtc'"></video>
        <div class="flv_hls_content" :id="id + 'flv_hls'" :class="element.data.url === '' ? 'back' : 'noback'" v-show="element.data.type !== 'webrtc'"></div>
    </div>
</template>

<script>
import Player, { Events } from 'xgplayer';
import FlvPlugin from 'xgplayer-flv';
import HlsPlugin from 'xgplayer-hls';
import config from '@/js/util/config.js';
import register from '@/js/main/register.js';
import 'xgplayer/dist/index.min.css';

export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        },
        mode: {
            type: Number
        }
    },
    data() {
        return {
            playerVideo: null
        };
    },
    mounted() {
        register.addComponent(this);
        this.creatPlayer(this.element);
    },
    methods: {
        redraw() {},
        async creatPlayer(element) {
            if (element.data.url !== '') {
                if (this.playerVideo != null) {
                    await this.playerVideo.destroy();
                    this.playerVideo = null;
                }
                let type = element.data.type;
                if (type === 'flv' || type === 'hls') {
                    let plugins = type === 'flv' ? [FlvPlugin] : [HlsPlugin]
                    let option = {
                        id: this.id + 'flv_hls',
                        url: element.data.url,
                        isLive: true,
                        autoplay: false,
                        plugins: plugins
                    }
                    // console.log(Events);
                    setTimeout(() => {
                        this.playerVideo = new Player(option);
                        this.playerVideo.on(Events.PLAY, () => {
                            console.log('开始');
                        });
                        this.playerVideo.on(Events.PAUSE, () => {
                            console.log('暂停');
                            // videoUrl =`${config.getServiceURL('scene')}service/scene/flv2/a1?file=${element.data.url}`
                        });
                        this.playerVideo.on(Events.ENDED, () => {
                            console.log('结束');
                        });
                        this.playerVideo.on(Events.ERROR, () => {
                            console.log('错误');
                        });
                    }, 10);
                } else if (type === 'webrtc') {
                    let video = document.getElementById(this.id + 'video-webrtc');
                    this.playerVideo = new JSWebrtc.Player(element.data.url, { video: video, autoplay: true, onPlay: (obj) => { console.log("start play") } });
                }
            } else {
                if (this.playerVideo != null) {
                    await this.playerVideo.destroy();
                    this.playerVideo = null;
                }
            }
        },
        async reload() {
            return this.playerVideo.reload();
        }
    },
    destroyed() {
        if (this.playerVideo != null) {
            this.playerVideo.destroy();
            this.playerVideo = null;
        }
        register.removeComponent(this);
    }
};
</script>

<style lang="scss" scoped>
.rtsp-video-modle {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    display: block;
    video {
        width: 100%;
        height: 100%;
        object-fit: fill !important;
    }
}
.flv_hls_content {
    width: 100% !important;
    height: 100% !important;
}
.back {
    height: 100%;
    background: #1a1f32cc;
    background-image: url('../../image/main/iframe.svg');
    background-size: 100% 100%;
}
</style>